<template>
  <div class="bg">
    <el-button class='bacToIndex' size="mini" @click="backtoIndex">返回首页</el-button>
    <div class='bigBox'>
      <div class='title'>
        园区设施
      </div>
      <v-touch @swiperight="swipeleft"
                @swipeleft="swiperight"
                style="width:100%;height:100%;">
        <el-carousel @change='changeItem' style="width: 100%;overflow:hidden" :interval="4000" type="card" height="60vh" ref='carousel'>
          <el-carousel-item v-for="(item, index) in list" :key="index">
            <div class="now" :style='item.inf'>
              <div class="tag" v-if='item.tag'>
                {{item.tag}}             
              </div>
              <div class='active'>
                <div class='littleTitle'>{{ item.name }}</div>
                <div class='littleContent'>{{ item.content }}</div>
              </div>
              
            </div>
          </el-carousel-item>
        </el-carousel>
      </v-touch>
    </div>
  </div>
</template>

<script>
export default {
  
  data() {
    return {
      list: [
        {
          inf: {
            backgroundImage: "url(" + require("../../assets/xigongda.jpg") + ")",
          },
          tag: '大院大所',
          name: '西北工业大学太仓长三角研究院',
          content: '西北工业大学与江苏省太仓市签订协议开展市校合作，共同建设西北工业大学太仓长三角研究院。紧盯关键共性技术、前沿引领技术、现代工程技术、颠覆性技术，聚焦核能材料、人工智能、智能制造、民用航空等领域，开展科技成果研发、高新企业孵化、技术转移应用、创新人才培养等工作。'
        },
        {
          inf: {
            backgroundImage: "url(" + require("../../assets/jisunasuo.jpg") + ")",
          },
          tag: '大院大所',
          name: '太仓中科信息技术研究院',
          content: '太仓中科信息技术研究院成立于2012年5月，主要围绕智能工业服务平台、工业大数据分析、智慧工厂、数字文化产业装备等新兴产业进行关键技术研究与开发，并积极推进和实现相关科研成果产业化、人才培养及公共服务等。'
        },
        {
          inf: {
            backgroundImage: "url(" + require("../../assets/guangdian.jpg") + ")",
          },
          tag: '大院大所',
          name: '太仓光电技术研究所',
          content: '是一家产学研联合创新载体，旨在落实中科院院地合作精神，以太仓市、苏州市及江苏省的经济和社会发展需求为导向，围绕光电信息、智能制造、先进医疗、物联网以及新材料等产业方向，开展技术转移、成果转化、自主研发及产业孵化工作。'
        },
         {
          inf: {
            backgroundImage: "url(" + require("../../assets/jiaoda.jpg") + ")",
          },
          tag: '孵化器',
          name: '航小天空天产业创新孵化器',
          content: '航小天空天产业创新孵化器位于大科园二期一号楼，孵化器面积约1.9万平方米，孵化器累计孵化企业28家，定位为“实验室+孵化器”，为创业者提供覆盖场地空间、专业设备、高校专业实验室技术支持等全方位的服务内容。'
        },
        {
          inf: {
            backgroundImage: "url(" + require("../../assets/zhichao.png") + ")",
          },
          tag: '众创空间',
          name: '太仓智巢众创空间',
          content: '太仓智巢众创空间孵化总面积约1000平方米，重点孵化智能制造，电子信息，战略新兴产业，人工智能，新材料，新一代信息技术，新能源和节能环保等产业方向。'
        },
        {
          inf: {
            backgroundImage: "url(" + require("../../assets/zhongying.png") + ")",
          },
          tag: '众创空间',
          name: '中英科技创新中心',
          content: '中英科技创新中心孵化总面积约1000平方米，载体以“产业”和“人才”双招为主导，提供企业服务，融资咨询，出海（英）咨询，国家化服务等业务。'
        },
        {
          inf: {
            backgroundImage: "url(" + require("../../assets/kechaung.jpg") + ")",
          },
          tag: '众创空间',
          name: '中科智能科创中心',
          content: '中科智能科创中心孵化总面积约2000平方米，重点引进“人工智能，区块链，大数据，工业互联网和智能制造”等领域人才落户太仓。'
        },
        {
          inf: {
            backgroundImage: "url(" + require("../../assets/zhilian.jpg") + ")",
          },
          tag: '众创空间',
          name: '智联部落',
          content: '智联部落孵化总面积约1000平方米，通过“孵化服务+资源协同+开放平台+天使投资”的立体孵化成长模式，为创业者提供全方位服务的众创平台。'
        },
        {
          inf: {
            backgroundImage: "url(" + require("../../assets/gongyu.jpg") + ")",
          },
          tag: '园区配套',
          name: '菁英公寓',
          content: ''
        },
        {
          inf: {
            backgroundImage: "url(" + require("../../assets/qiuchang.jpg") + ")",
          },
          tag: '园区配套',
          name: '休闲体育场',
          content: ''
        },
         {
          inf: {
            backgroundImage: "url(" + require("../../assets/shitang.jpg") + ")",
          },
          tag: '园区配套',
          name: '食堂',
          content: ''
        },
         {
          inf: {
            backgroundImage: "url(" + require("../../assets/yinglou.jpg") + ")",
          },
          tag: '园区配套',
          name: '特效摄影',
          content: ''
        },
        {
          inf: {
            backgroundImage: "url(" + require("../../assets/kudi.png") + ")",
          },
          tag: '园区配套',
          name: '库迪咖啡',
          content: ''
        },
        {
          inf: {
            backgroundImage: "url(" + require("../../assets/quanjia.png") + ")",
          },
          tag: '园区配套',
          name: '全家',
          content: ''
        },
         {
          inf: {
            backgroundImage: "url(" + require("../../assets/yunizaiyiqi.png") + ")",
          },
          tag: '园区配套',
          name: '鱼你在一起',
          content: ''
        },
         {
          inf: {
            backgroundImage: "url(" + require("../../assets/85duC.png") + ")",
          },
          tag: '园区配套',
          name: '85℃',
          content: ''
        },
      ],
    }
  },
  methods: {
    backtoIndex() {
      this.$router.push({ path: '/solution' })
    },
    changeItem(e) {
      // console.log(e, 'e')
    },
    swipeleft() {
      console.log('left')
      this.$refs.carousel.prev()
    },
    swiperight() {
      console.log('right')
      this.$refs.carousel.next()
    },
  },
  created() {
  },
}
</script>

<style scoped lang='less'>
.bacToIndex {
  height: 40px;
  position: absolute;
  margin: 10px 30px;
  top: 0;
  left: 0;
  background-color: #001e69;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
}
.bg {
  background-image: url('../../assets/basBack2.jpg');
  height: 100vh;
  background-size: 100% 100%;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  .bigBox {
    width: 85%;
    height: 80vh;
    // border: 1px solid red;
    display: flex;
    // justify-content: center;
    align-items: center;
    flex-direction: column;
     .title {
      // height: 100px;
      // display: flex;
      // justify-content: center;
      padding: 40px;
      text-align: center;
      font-size: 52px;
      font-weight: bold;
      color: #001e68;
     }
  }

}
.el-carousel__item {
  box-sizing: border-box;
  background-image: url(../../assets/boxLittle.png);
  background-size: 100% 100%;
  .now {
     border: 5px solid #427dea;
    border-radius: 15px;
    background-color: #fff;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 2;
    box-sizing: border-box;
    position: relative;
    font-size: 26px;
    color: #fff;
    .tag {
      display: inline-block;
      padding: 10px;
      font-size: 20px;
      background-color: #2655c9;
      border-top-left-radius: 10px;
    }
    .active {
      position: absolute;
      bottom: 0;
      background-color: #00000098;
      line-height: 40px;
      padding: 20px;
      box-sizing: border-box;
      width: 100%;
    }
    .littleTitle {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 36px;
      color: #fff;
      text-align: center;
      padding: 10px;
    }
    .littleContent {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

</style>

